<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts 敬业度柱状图示例</title>
  <!-- 引入 ECharts.js -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 1200px; height: 800px;"></div>

  <script>
    // 从 JSON 文件中获取数据
    $.getJSON('JYD.json', function(data) {
      // 处理获取到的 JSON 数据
      // 获取 score 值和出现次数
      const scores = Object.values(data.Sheet1).map(obj => obj.score);
      const countMap = {};

      scores.forEach(score => {
        if (countMap[score]) {
          countMap[score]++;
        } else {
          countMap[score] = 1;
        }
      });

      // 使用 ECharts 绘制柱状图
      const chart = echarts.init(document.getElementById('chart'));

      // 准备 x 轴和 y 轴的数据
      const xAxisData = Object.keys(countMap);
      const yAxisData = Object.values(countMap);

      // 配置项
      const options = {
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        series: [
          {
            data: yAxisData,
            type: 'bar',
          },
        ],
      };

      // 使用配置项绘制图表
      chart.setOption(options);
    });
  </script>
</body>
</html>
